<template>
  <div class="select-tooltip">
    <q-select class="select multipe-select margin-b-20"
              :multiple="multiple"
              :outlined="!borderless"
              dense
              emit-value
              map-options
              options-dense
              :borderless="borderless"
              ref="select"
              @input="selStation"
              :options="optionsLists"
              v-model="devicesData"
              style="margin-right: 20px">
      <q-tooltip v-if="multiple && devicesData && devicesData.length > 1" max-width="300px">
        <div style="word-wrap:break-word">{{getTooltip()}}</div>
<!--        <template v-for="(item,index) in devicesData">-->
<!--          <span :key="index">{{index !== devicesData.length -1 ? devicesLabel[item] + ',' : devicesLabel[item]}}</span>-->
<!--        </template>-->
      </q-tooltip>
      <template v-slot:no-option>
        <div class="no-option" />
      </template>
      <template v-slot:before>
        <span class="form-name" v-if="msg">{{msg}}:</span>
      </template>
    </q-select>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'select-tooltip',
  props: {
    borderless: {
      type: Boolean,
      default: false
    },
    // 下拉选的值
    options: {
      type: Array,
      required: true
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 下拉选的标题
    msg: {
      type: String
    },
    isShowAll: {
      type: Boolean,
      default: false
    },
    value: [Array, String, Number]
  },
  data () {
    return {
      devicesData: null
    }
  },
  watch: {
    value: {
      handler (val) {
        this.devicesData = val
      },
      deep: true,
      immediate: true
    },
    devicesData: {
      deep: true,
      handler () {
        this.$emit('input', this.devicesData)
      }
    }
  },
  computed: {
    devicesLabel () {
      const devicesLabel = {}
      this.options.forEach(item => {
        devicesLabel[item.value] = item.label
      })
      return devicesLabel
    },
    optionsLists () {
      return !this.isShowAll ? this.options : [{ label: '全部', value: 'all' }, ...this.options]
    }
  },
  methods: {
    getTooltip () {
      let tips = ''
      this.devicesData.forEach((item, index) => {
        tips += index !== this.devicesData.length - 1 ? this.devicesLabel[item] + ',' : this.devicesLabel[item]
      })
      return tips
    },
    // 选择工位触发
    selStation (val) {
      if (val[0] === 'all' && this.multiple && val.length > 1) {
        this.devicesData = this.devicesData.slice(1)
      }
      if (this.multiple && val.slice(1).indexOf('all') > -1) {
        this.devicesData = ['all']
      }
      if (this.multiple && _.isEmpty(val)) {
        this.devicesData = ['all']
      }
      this.$emit('changeData')
    }
  },
  mounted () {
    // 多选的时候初始化
    if (this.multiple && this.devicesData !== []) {
      this.devicesData = ['all']
    }
  }
}
</script>

<style scoped lang="stylus">
>>>.q-tooltip{
  word-break break-word
}
// 无边框下拉
>>>.q-field--borderless {
  .form-name{
    font-size 14px
  }
  .q-field__inner{
    width auto
    height 21px
  }
  .q-field__marginal{
    height 21px
  }
  .q-field__{
    &control, &append {
      height 21px
      padding-left 5px
      min-height 21px !important
    }
    &control-container{
      line-height: 21px;
      padding: 0 !important
      height 21px
    }
    &native{
      padding 0
      min-height 21px !important
      & span{
        line-height 21px
        max-width 100% !important
      }
    }
  }
}
</style>
